<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

    <p><a href="https://echarts.baidu.com/tutorial.html">5 分钟上手 ECharts</a></p>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script src="./lib/echart/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        // 这里我选的图片是透明背景的，如果使用白色背景的图片就可以遮盖节点后的线条了
        let plusImg = "";

        let minusImg = "";

        let emptyImg = ''

        // 获取节点显示的图片
        const getSymbolImg = (item = {}) => {
            return `image://${item.children && item.children.length ? minusImg : item.children_bak && item.children_bak.length ? plusImg : emptyImg}`;
        };

        // 基础配置option
        const commonOption = {
            tooltip: {
                trigger: "item",
                triggerOn: "mousemove",
                enterable: true,
                alwaysShowContent: false,
                hideDelay: 100,
                formatter: '{b}'
            },
            animation: false,
            series: [{
                type: "tree",
                symbolSize: 30,
                symbol: "emptyCircle",
                left: "2%",
                right: "2%",
                top: 60,
                bottom: 170,
                orient: "vertical",
                expandAndCollapse: true,
                initialTreeDepth: -1,
                label: {
                    normal: {
                        position: "top",
                        verticalAlign: "bottom",
                        align: "center",
                        fontSize: 12,
                        formatter: param => {
                            let name = param.data.name;
                            if (name.length >= 10) {
                                name = name.slice(0, 9) + "...";
                            }
                            name = name.split('').join("\n");
                            return name;
                        }
                    }
                },
                leaves: {
                    label: {
                        normal: {
                            position: "bottom",
                            verticalAlign: "top",
                            align: "center",
                            distance: 10
                        }
                    }
                }
            }]
        };

        // 原始数据
        const originalData = {
            1: { name: '百度在线网络技术（北京）有限公司', id: 1, level: 0 },
            2: { id: 2, name: '产品部', level: 1, parent_node_id: 1 },
            3: { id: 3, name: '研发部', level: 1, parent_node_id: 1 },
            4: { id: 4, name: '前端开发', level: 2, parent_node_id: 3 },
            5: { id: 5, name: '后端开发', level: 2, parent_node_id: 3 },
            6: { id: 6, name: '算法', level: 2, parent_node_id: 3 },
            7: { id: 7, name: '测试部', level: 2, parent_node_id: 3 },
            8: { id: 8, name: '运维', level: 2, parent_node_id: 3 },
            9: { id: 9, name: '运营', level: 1, parent_node_id: 1 },
            10: { id: 10, name: '运营-1部', level: 2, parent_node_id: 9 },
            11: { id: 11, name: '运营-2部', level: 2, parent_node_id: 9 },
            12: { id: 12, name: '产品-1部', level: 2, parent_node_id: 2 },
            13: { id: 13, name: '产品-2部', level: 2, parent_node_id: 2 },
        }



        // 数据处理
        const innerData = [];
        Object.values(originalData).forEach((item, index) => {
            if (innerData[item.level] && innerData[item.level].length) {
                innerData[item.level].push(item);
            } else {
                innerData[item.level] = [item];
            }
        });


        for (let i = innerData.length - 1; i >= 0; i--) {
            // 每个item和result中的每个对象是同一引用
            innerData[i].forEach((item, index, all) => {
                // 备份children数据
                item.children_bak = item.children;

                item.symbol = getSymbolImg(item);
                // 寻找父级，并丢入父级的children数组中
                if (i) {
                    let parent = innerData[i - 1].find((it, i) => {
                        return +it.id === +item.parent_node_id;
                    });
                    if (parent) {
                        if (parent && parent.children && parent.children.length) {
                            parent.children.unshift(item);
                        } else {
                            parent.children = [item];
                        }
                    }
                } else {
                    item.label = {
                        normal: {
                            rotate: 0,
                            align: "center",
                            formatter: "{b}"
                        }
                    };
                }
            });
        }


        // 关闭所有的下级
        const closeChildren = aimObj => {
            if (aimObj && aimObj.children_bak && aimObj.children_bak.length) {
                aimObj.children_bak.forEach((item, index) => {
                    item.children = [];
                    aimObj.symbol = getSymbolImg(aimObj);
                    closeChildren(item);
                });
            }
        };

        // 单个节点的点击事件
        const clickFun = param => {
            console.log('param', param)
            let aimObj = originalData[param.data.id];

            if (aimObj && aimObj.children && aimObj.children.length) {
                aimObj.children = [];
                // 收起子集中打开的层级
                closeChildren(aimObj);
            } else if (aimObj) {
                aimObj.children = aimObj.children_bak || [];
            }
            aimObj.symbol = getSymbolImg(aimObj);
            // 手动关闭tooltip不然会出现不可关闭的tooltip
            myChart.dispatchAction({
                type: "hideTip"
            });
            myChart.clear();
            commonOption.series[0].data = innerData[0]

            myChart.setOption(
                commonOption,
                true
            );
        };

        commonOption.series[0].data = innerData[0]

        myChart.setOption(
            commonOption,
            true
        )

        myChart.on("click", clickFun);


        // myChart.setOption(option);



    </script>




</body>

</html>